<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<title>Pea tips社园</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="this is my page"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/networkforum/css/user_main.css" />    
<link rel="stylesheet" type="text/css" href="/networkforum/css/user_main_base.css" />    
<!-- <link rel="stylesheet" type="text/css" href="/networkforum/css/base.css" /> -->	
<script type="text/javascript" src="/networkforum/js/user_main.js"></script>
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<script type="text/javascript">
function addFriend(){
	var back = document.getElementById("back");
	var addFriend = document.getElementById("addFriend");

	if(back.style.display == ""){
		back.style.display = "none";
		addFriend.style.display = "none";
	}
	else{
		back.style.display = "";
		addFriend.style.display = "";
	}
	var fiul = document.getElementById("fiul");
	fiul.innerHTML = "";
}
function searchUser(){
	var myajax = getByAjax();
	var name = document.getElementById("searchName").value;
	myajax.init(null,"get",true);
	//myajax.get("/networkforum/friend/search_user.do?userName="+name,searchBack);
	myajax.get("/networkforum/friend/user_list.do?userName="+encodeURIComponent(name),searchBack);
	myajax = null;
}
function searchBack(d){
	//var data = eval("("+d+")");
	var dd = toJson(d);
	var fiul = document.getElementById("fiul");
	var frag = document.createDocumentFragment();
	for(var i =0;i<dd.length;i++){
		var data = dd[i];
		var li = document.createElement("li");
		var userPhoto = document.createElement("img");
		var userName = document.createElement("span");
		var userSex = document.createElement("span");
		var addFriend = document.createElement("label");
		var addCare = document.createElement("label");
		var addBlack = document.createElement("label");
	
		userPhoto.src = data.userPhoto;
		userName.innerHTML = data.userName;
		userSex.innerHTML = data.userSex;
		addFriend.innerHTML = "加入黑名单";	
		addCare.innerHTML = "加入关注";
		addBlack.innerHTML = "加为好友";
	
		li.appendChild(userPhoto);
		li.appendChild(userName);
		li.appendChild(userSex);
		li.appendChild(addFriend);
		li.appendChild(addCare);
		li.appendChild(addBlack);
		li.userName = data.userName;
		frag.appendChild(li);
	
		li.onclick = function(ev){
			ev = ev || window.event;
			var target = ev.target;
			var li = null;
			if(target.tagName == "LI"){
				li = target;
			}
			else{
				li = target.parentElement;
			}
			if(target.innerHTML == "加为好友"){
				insertRelation(li.userName,"申请");
			}
			else if(target.innerHTML == "加入关注"){
				insertRelation(li.userName,"关注");
			}
			else if(target.innerHTML == "加入黑名单"){
				insertRelation(li.userName,"黑名单");
			}
		}
	}
	fiul.innerHTML = "";
	fiul.appendChild(frag);
}
function insertRelation(friendName,level){
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/friend/add_friend.do?friendName="+encodeURIComponent(friendName)+"&level="+encodeURIComponent(level),function(d){
		alert(d);
	});
	myajax = null;
}
function loadInfo(name){
	if(name == "关心"){
		document.getElementById("care").innerHTML = "0";
		name = "care";
	}
	else if(name == "留言"){
		document.getElementById("messages").innerHTML = "0";
		name = "message";
	}
	else if(name == "博客"){
		document.getElementById("article").innerHTML = "0";
		//name = "";
	}
	else if(name == "帖子"){
		document.getElementById("discuss").innerHTML = "0";
		name = "discuss";
	}
	else if(name == "相册"){
		document.getElementById("picture").innerHTML = "0";
		name = "picture";
	}	
	else if(name == "动态"){
		//document.getElementById("friendApply").innerHTML = "0";
		name = "dongtai";
	}
	//encodeURI(name);	
	//encodeURI(encodeURI(name));
	var url = "/networkforum/user/load_my_notice.do";
	scrollEvent(url,name);
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get(url+"?index=0&size=20&moduleName="+encodeURIComponent(name),function(d){
		//var data = eval("("+d+")");
		var data = toJson(d);
		var mcinfo = document.getElementById("mcinfo");
		var mcnav = document.getElementById("mcnav");
		mcinfo.innerHTML = "";
		mcinfo.appendChild(mcnav);
		
		activeInfo().addNode(data);	
	});
	myajax = null;
}
function reloadHandle(){
	var url = page.scrolls.method.getUrl();
	page.scrolls.setIndex(1);
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get(url+"index=0&size=20",function(d){
		//var data = eval("("+d+")");
		var data = toJson(d);
		var mcinfo = document.getElementById("mcinfo");
		var mcnav = document.getElementById("mcnav");
		mcinfo.innerHTML = "";
		mcinfo.appendChild(mcnav);
		
		activeInfo().addNode(data);	
	});
	myajax = null;
}
function applyList(){
	var applyInner = document.getElementById("applyInner");
	var module = applyInner.children[0];
	applyInner.innerHTML = ""
	applyInner.appendChild(module);
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/friend/load_apply.do",applyListBack);
	myajax = null;
}
function applyListBack(d){
	var applyList = document.getElementById("applyList");
	var back = document.getElementById("back");
	applyList.style.display = "";
	back.style.display = "";
	var data = toJson(d);
	page.view("applyInner",data,applyOption);
}
var applyOption ={
	userName:{
		param:{id:"applyUserName"},
		bind:{userId:"userId",relationId:"relationId"},
	},
	userPhoto:{
		param:{id:"applyUserPhoto"},
	},
	relationTime:{
		param:{id:"applyTime"},
	},
}
function updateApply(event,state){
	event = event || window.event;
	var target = event.target || event.srcElement;
	var node = target.parentElement.children[0];
	var relationId = node.relationId;
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/friend/update_apply.do?relationId="+relationId+"&state="+state,null);
	myajax = null;
	var li = target.parentElement.parentElement;
	li.parentElement.removeChild(li);
}
function closeApplyList(){
	var applyList = document.getElementById("applyList");
	applyList.style.display = "none";
	document.getElementById("back").style.display = "none";
	window.location.reload();
}
</script>
  </head>
  <body>
  	<!--<section class="top">-->
    	<iframe id="tnav" class="tnav" src="/networkforum/pages/user/user_header.html"></iframe>
    <!--</section>-->
    <header class="header">
    	<section class="himg">
            <section class="userInfo">
                <h2></h2>
                <h4></h4>
            </section>
            <img id="headerimg" class="headerimg" src="/networkforum/images/user_mian_header1.jpg" alt="图片加载失败"/>
            <!--<img onmouseover="cbp(this,'../../images/user_header_left2.jpg')" onmouseout="cbp(this,'../../images/user_header_left1.jpg')" class="headerleft" src="../../images/user_header_left1.jpg" />
        	<img class="headerimg" src="../../images/user_mian_header1.jpg" alt="图片加载失败">
            <img onmouseover="cbp(this,'../../images/user_header_right2.jpg')" onmouseout="cbp(this,'../../images/user_header_right1.jpg')" class="headerright" src="../../images/user_header_right1.jpg" />-->
        </section>        
    </header>
    <section class="main">
    	<section class="mleft">
        	<section class="mluserLogo">
            	<img id="user_picture" class="user" title="男" src="/networkforum/images/left1.jpg" />
                <section class="mluserright">
	                <a href="#"><h2 id="user_name" title="男">xun</h2></a>
                    <div class="clear"></div>
                    <a href="/networkforum/user/user_basic.do">修改资料</a>
                    <!-- <a href="#">更换头像</a> -->
                </section>
                <div class="clear"></div>
                <section class="mllbottom">
                	<!--<a id="user_care" href="#">关注(0)</a>-->
                    <a id="user_friends" href="javascript:void(0);">好友0</a>
                    <a id="user_score" href="javascript:void(0);">积分0</a>
                </section>
            </section>
            <section class="mlmain">
            	<ul id="mlul_1" class="mlul_1">
                 	<li onclick="loadInfo('动态')">
                    	<!--<img src="../../images/fn1.jpg" />-->好友动态
                    </li>
                    <li onclick="loadInfo('关心')">
                    	<!--<img src="../../images/care1.jpg" />-->特别关心<a id="care" href="javascript:void(0);"></a>
                    </li>
                	<li onclick="loadInfo('留言')">
			     	               我的留言<a id="messages" href="javascript:void(0);"></a>
                    </li>
                    <li onclick="loadInfo('博客')">
                    	我的博客<a id="article" href="javascript:void(0);"></a>
                    </li>
                    <li onclick="loadInfo('帖子')">
                    	我的讨论区<a id="discuss" href="javascript:void(0);"></a>
                    </li>
                    <li onclick="loadInfo('相册')">
                    	我的照片<a id="picture" href="javascript:void(0);"></a>
                    </li>
                    <li onclick="applyList('好友申请')">
                    	好友申请<a id="friendApply" href="javascript:void(0);"></a>
                    </li>
                </ul>
                <ul id = "mlul_2" class="mlul_2">
                	<h2>我的好友</h2>
                	<a href = "javascript:void(0);" onclick="addFriend();">
                		<img src="/networkforum/images/addfriend.jpg"/>
                	</a>
                	<div id="friendInner" style="width:100%;min-height:265px;height:auto,overflow:hidden;">
                	</div>
                	<div class="paging" id="paging">
			   			<div class="clear"></div>
				   		<span id="previouPage" style="cursor: pointer;">上一页</span>
				   		<input id="currentPage" type="text" value = "1"/>	
				   		<span id="nextPage" style="cursor: pointer;">下一页</span>
				   		<span id="totalPage">共 1 页</span>
				   	</div>
                	<!--  <div class="paging" id="paging">
                		<div class="clear"></div>
                		<span id="previouPage" style="cursor: pointer;">上一页</span>
                		<span id="currentPage">1/8</span>
                		<span id="nextPage" style="cursor: pointer;">下一页</span>
                	</div>-->
                </ul>
            </section>
        </section>
        <section class="mcenter">
        	<section class="munews">
            	<h4>今天的心情分享了吗？</h4>
                <textarea id="useractive" wrap="physical"></textarea>
				<a href="#" onclick="userActive();"><img src="/networkforum/images/unp.jpg" /></a>                    
            </section>
            <section id="mcinfo" class="mcinfo">
                <nav id="mcnav" class="mcnav" id="mcnav">
                    <!--<ul class="mcnav_ul">
                         <li><a href="#">全部</a></li>
                        <li><a href="#">相册</a></li>
                        <li><a href="#">博客</a></li>
                        <li><a href="#">留言</a></li> 
                    </ul>
                    <a id="acitvesub" title="刷新" href="#">
                        <img onmouseover="cbp(this,'/networkforum/images/newsreload2.jpg')" onmouseout="cbp(this,'/networkforum/images/newsreload1.jpg')" src="/networkforum/images/newsreload1.jpg" />
                    </a>-->
                    <span onclick="reloadHandle();">刷新</span>
                </nav>  
            </section>
        </section>
        <section class="mright">
        	<label class="createArticle" onclick="javascript:location='/networkforum/pages/article/article_build.html'">写博文</label>
			<section id="mrdate" class="mrdate">
            	
            </section>
            <section id="mrvisit" class="mrvisit">
            	<ul class="visitHeader">
            		<li><a href="#">谁看过我</a></li>
            		<!-- <li><a href="#">我看过谁</a></li> -->
            	</ul>
            	<ul id="visitInner">
	       			<li style="display:none;">
	       				<img id="userPhoto" src="../../images/left1.jpg"/>
	       				<span id="userName">xunxun</span>
	       				<span id="visitTime">2012-12-21 12:12:12</span>
	       			</li>
            	</ul>
            </section>
            <section class="hotuser">
            	<header class="hotHeader">人气用户</header>
            	<ul id="hotUserInner">
            	</ul>
            </section>
            <section class="hotarticle">
            	<header class="hotHeader">热门博客</header>
            	<ul id="hotArticleInner">
            	</ul>
            </section>
            <section class="hotpicture">
            	<header class="hotHeader">热门照片</header>
            	<ul id="hotPictureInner">
            	</ul>
            </section>
        </section>
    </section>
    <iframe class="footer" src="/networkforum/pages/footer.html"></iframe>
    <section id="back" class="back alpha2" style="display:none;"></section>
    <section id="addFriend" class="addFriend" style="display:none;">
    	<section class="addInner">
    		<label id="addClose" class="cursor" onclick="addFriend();">关闭</label>
    		<h2 class="addTitle">添加好友</h2>
   			<section class="searchTitle">
				<span>昵称:</span>    			
   				<input id="searchName" type="text"/>
   				<span id="searchFriend" class="cursor" onclick="searchUser();">查询</span>
   			</section>
   			<section class="fiiner">
   				<h2 class="result">结果展示:</h2>
   				<ul id="fiul" class="fiul">
   				</ul>
   			</section>
    	</section>
    </section>
    <section id="applyList" class="applyList" style="display:none;">
    	<h2>好友申请记录</h2>
    	<ul id="applyInner" class="applyInner">
    		<li>
    			<img id="applyUserPhoto" src="../../images/left1.jpg"/>
    			<div class="applyContent">
    				<span id="applyUserName">xun</span>
    				<span id="content">申请加你为好友！</span>
    				<span id="applyTime">2012-12-12 12:12:12</span>
    				<span id="applyBottom" onclick="updateApply(event,true)">接受</span>
    				<span id="applyBottom" onclick="updateApply(event,false)">拒绝</span>
    			</div>
    		</li>
    	</ul>
    	<span id="closeApply" onclick="closeApplyList()">关闭</span>
    </section>
  </body>
    <!-- <script type="text/javascript" src="/networkforum/js/Calendar3.js"></script> -->
    <script type="text/javascript" src="/networkforum/js/mydate.js"></script>
    <script type="text/javascript" src="/networkforum/js/myajax.js"></script>
    <script type="text/javascript" src="/networkforum/js/json2.js"></script>
    <script type="text/javascript" src="/networkforum/js/base.js"></script>
    <script type="text/javascript" src="/networkforum/js/scrolls.js"></script>
    <script type="text/javascript" src="/networkforum/js/view.js"></script>
    <script type="text/javascript" src="/networkforum/js/pageing.js"></script>
</html>
